<template>
  <el-card v-loading="loading" class="container">
    <el-form size="small" label-width="120px" label-position="left">
      <el-form-item label="模板ID">
        <span>{{ templateData.templateIdShort }}</span>
      </el-form-item>
      <el-form-item label="标题">
        <span>{{ templateData.title }}</span>
      </el-form-item>
      <el-form-item label="跳转小程序页面">
        <span>{{ templateData.pagePath }}</span>
      </el-form-item>
      <el-form-item v-if="!templateData.pagePath" label="跳转url">
        <span>{{ templateData.url }}</span>
      </el-form-item>

      <el-form-item label="参数">
        <el-table empty-text=" " :data="templateData.keywords" border size="small" style="width: 800px">
          <el-table-column prop="name" align="center" label="Name" />
          <el-table-column prop="value" align="left" label="Value">
            <template slot-scope="scope">
              <div style="white-space: pre-line;">{{ scope.row.value }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="description" align="left" label="备注">
            <template slot-scope="scope">
              <div style="white-space: pre-line;">{{ scope.row.description }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

    </el-form>

    <el-form ref="form" size="small" label-position="left" :rules="rules" label-width="120px" :model="form">
      <el-form-item label="appId" prop="appId">
        <el-input v-if="templateData.templateType === 0" v-model="form.appId" placeholder="公众号appId" />
        <el-input v-if="templateData.templateType === 1" v-model="form.appId" placeholder="小程序appId" />
      </el-form-item>

      <el-form-item label="openId" prop="openId">
        <el-input v-if="templateData.templateType === 0" v-model="form.openId" placeholder="公众号openId" />
        <el-input v-if="templateData.templateType === 1" v-model="form.openId" placeholder="小程序openId" />
      </el-form-item>

      <el-form-item v-if="templateData.templateType === 0" label="小程序 APPID" prop="wxaAppId">
        <el-input v-model="form.wxaAppId" placeholder="请输入跳转小程序的APP ID" />
      </el-form-item>

      <el-form-item v-if="templateData.templateType === 0" label="小程序 APPID" prop="wxaAppId">
        <el-input v-model="form.pagePath" placeholder="请输入跳转小程序的APP ID" />
      </el-form-item>

      <el-form-item label="消息内容数据">
        <el-form ref="msgForm" :model="msgData" :rules="msgRules">
          <el-form-item prop="name" style="display: inline-block">
            <el-input v-model="msgData.name" style="width: 200px" placeholder="name" />
          </el-form-item>

          <el-form-item style="display: inline-block" prop="value">
            <el-input v-model="msgData.value" type="textarea" style="height: 40px; width: 200px; margin-right: 10px" placeholder="value" />
          </el-form-item>

          <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
        </el-form>
      </el-form-item>

      <el-form-item prop="keywords">
        <el-alert
          v-if="form.templateType === 1"
          style="line-height: 1.2; margin-bottom: 10px"
          title="对应小程序模板, color字段不会生效. 字段会顺序展示"
          type="info"
        />

        <el-table empty-text=" " :data="keywords" border size="small" style="width: 800px">
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="value" label="Value">
            <template slot-scope="scope">
              <div style="white-space: pre-line;">{{ scope.row.value }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="160px">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="handleDel(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>

  </el-card>

</template>

<script>
import { sendMsg, templateInfo } from '@/api/wxTemplateMsg'

export default {
  name: 'SendMsg',
  props: ['id'],
  data() {
    return {
      loading: false,
      form: {
        wxaAppId: ''
      },
      keywords: [],
      msgData: {
        name: '',
        value: ''
      },

      rules: {
        openId: [{
          required: true,
          message: '请输入openId',
          trigger: 'blur'
        }
        ],
        appId: [{
          required: true,
          message: '请输入appId',
          trigger: 'blur'
        }],
        wxaAppId: [{
          required: true,
          message: '请输入跳转小程序的APP ID',
          trigger: 'blur'
        }]
      },

      msgRules: {
        name: [{
          min: 1,
          max: 20,
          required: true,
          message: '请输入参数名',
          trigger: 'blur'
        }
        ],
        value: [{
          min: 1,
          max: 255,
          required: true,
          message: '请输入参数值',
          trigger: 'blur'
        }
        ]
      },
      templateData: {}
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      templateInfo(this.id).then(res => {
        const templateData = res.data.detail
        templateData.keywords = res.data.keywords
        this.templateData = templateData
      })
    },
    sendTemplateMsg() {
      this.loading = true
      const data = this.form
      const msgData = {}
      for (let i = 0; i < this.keywords.length; i++) {
        msgData[this.keywords[i].name] = this.keywords[i].value
      }
      data.msgData = msgData
      data.wxTemplateMsgId = this.id
      sendMsg(data).then((resp) => {
        this.loading = false
        if (resp.code === 0) {
          this.$message.success('发送成功!')
        }
      }).catch(() => {
        this.loading = false
      })
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.sendTemplateMsg()
        }
      })
    },

    handleAdd() {
      this.loading = true
      this.$refs.msgForm.validate((valid) => {
        if (valid) {
          this.keywords.push({
            name: this.msgData.name,
            value: this.msgData.value
          })
        }
        this.msgData = {}
        this.$refs.msgForm.clearValidate()
        this.loading = false
      })
    },
    handleCancel() {
      this.$router.back()
    },
    handleDel(scope) {
      this.keywords.splice(scope.$index, 1)
    }
  }
}
</script>

<style scoped>
  .container >>> .el-input {
    width: 400px;
  }
</style>
